<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
	<meta name="Description" content="">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
  <title>HTML5钢琴</title>
  <!-- 点击爱心特效代码 -->
  <script src="https://cdn.jsdelivr.net/gh/Zevs6/CDN/js/aixintexiao.js"></script>
  <style type="text/css">
	*{
		margin:0px;
		padding:0px;
		
	}
	html{
		width: 100vw;
		height: 100vh;
		/* 设置鼠标图片样式 */
		cursor: url(https://cdn.jsdelivr.net/gh/Zevs6/CDN/img/cursor/normal.cur),auto;
		user-select: none;
	}
	/*-------------介绍--------------*/
	.button{
		position: absolute;
		left:100px;
		top:50px;
		width:100px;
		height:30px;
		background-color: #A5DE37;
    	border-color: #A5DE37;
		border-radius: 200px;
		-webkit-box-shadow: 0 7px 0 #8bc220, 0 8px 3px rgba(0, 0, 0, 0.3);
		box-shadow: 0 7px 0 #8bc220, 0 8px 3px rgba(0, 0, 0, 0.3);
		color: white;
		line-height: 30px;
		text-align: center;
		cursor: url(https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/cursor/texto.cur),auto;
		user-select: none;	/*--让文字无法被选中--*/
		transition-duration: .3s;
	}
	.button:hover{
		background-color:#b9e563;
		border-color:#b9e563;
		box-shadow: 0 7px 0 #84b91f, 0 8px 3px rgba(0, 0, 0, 0.3);
	}
	.button:active {
		background-color:#a1d243;
		border-color:#a1d243;
		color:#8bc220;
		box-shadow: 0 2px 0 #6b9619, 0 3px 3px rgba(0, 0, 0, 0.2);
		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
		transition-property: all;
		transition-duration: .15s;
	}
	#js{
		display: none;
		position: absolute;
		left:100px;
		top:100px;
		width: 350px;
		height: 200px;
		padding-left: 10px;
		background: rgb(244, 226, 255);
		border: rgb(255, 255, 255) solid 3px;
		border-style:double;
		border-radius: 10px;
		color: rgb(56, 56, 56);
		line-height: 30px;
	}
	/*-------钢琴部分--------*/
	ul{
		width:480px;
		height:360px;
		transform: translate(-50%, -50%);
		position: absolute;
		top: 50%;
		left: 50%;
	}
	li{
		float:left;
		list-style-type: none;
		position: relative;
	}
	li>div{
		height: 360px;
		width: 60px;
		background: rgba(255,255,255,.3);
		border: 1px solid;
		border-color:rgba(0, 0, 0, .8);
		border-bottom-left-radius : 8px;
		border-bottom-right-radius: 8px;
		box-sizing: border-box;
		box-shadow: /*inset  3px 0  10px  #c9c6c6,*/
					inset 5px -8px  0  #00000023;
		text-align: center;
		display:table-cell;
		vertical-align: bottom;
	}
	li:not(:last-child)>div{
		border-right: none;
	}
	/* 当白键按下时的样式 */
	li>div:active{
		box-shadow: inset 3px -2px  0  #00000036;
		background: linear-gradient(45deg, rgba(255,255,255,.7), rgba(255,255,255,.5));
	}
	.white_active{
		box-shadow: inset 3px -2px  0  #00000036;
		background: linear-gradient(45deg, rgba(255,255,255,.7), rgba(255,255,255,.5));
	}
	.show{
		background: rgb(255, 97, 97);
	}

	li>p{
		height: 200px;
		width: 40px;
		background-color: #000;
		border-bottom-left-radius : 5.5px;
		border-bottom-right-radius: 5.5px;
		box-shadow: inset 5px -7px 0 #2c2c2c;
		position: absolute;
		top:0;
		left: 40px;
		z-index: 999;
	}
	li>p:hover{
		background: linear-gradient(45deg, #4c4c4c, #444444);
	}
	/* 当黑键按下时的样式 */
	li>p:active{
		box-shadow:inset 3px -5px 0 #2c2c2c;
	}
	.black_active{
		box-shadow:inset 3px -5px 0 #2c2c2c;
	}
	#text{
		width: 200px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		position: absolute;
		top:calc(50vh + 180px);
		left: 50%;
		transform: translate(-50%);
	}
	/* 移动端样式 */
	@media (max-width: 520px){
		ul{
			width: 98vw;
			height: 50vh;
		}
		li>div{
			width: 12vw;
			height: 50vh;
		}
		li>p{
			width: 10vw;
			height: 25vh;
			left: 7vw;
		}
		#text{
			top:75vh;
		}
	}
 </style>
 </head>
 <body>
		<div id="sy" onclick="Mtued()"></div>
		<div>
			请输入歌曲名：
			<input type="text" id="song" placeholder="请输入歌曲名">
			<button id="check">确定</button>
		</div>
		<ul>
			<li><div></div><p></p></li>
			<li><div></div><p></p></li>
			<li><div></div></li>
			<li><div></div><p></p></li>
			<li><div></div><p></p></li>
			<li><div></div><p></p></li>
			<li><div></div></li>
			<li><div></div></li>
		</ul>
		<div id="text"></div>
		<div class="button" id="btn-js">
			<a>使用介绍</a>
		</div>
		<div id="js">
			使用键盘上的S~L键操作钢琴白键,E,R,Y,U,I操作钢琴黑键，也可以通过鼠标点击来弹奏钢琴。
			可通过快捷键V键控制琴键上数字的显示与隐藏。目前只支持四首歌曲，晴天，最长的电影，同桌的你，送别。
		</div>
	</body>
<script src="piano.js"></script>
</html>
